<template>
  <div class="activity_bg">
    <div class="activity_block">
      <div class="navbar-btn" @click="toggleMusicState">
        <img
          src="../../assets/images/activity/music-play.png"
          v-if="musicPlay.musicState"
        />
        <img src="../../assets/images/activity/music-mute.png" v-else />
      </div>
    </div>
    <div class="activity_title">{{ activityText }}</div>
    <div class="activity_content">
      <div class="van-cell_block">
        <div class="van-field__left">
          <div class="left-icon">
            <img src="../../assets/images/activity/密码@2x.png" alt="" />
          </div>
          <div class="van-cell__value">
            <input
              type="password"
              class="van-field__control"
              placeholder="请输入大屏密码"
              @input="passInput"
              v-model="password"
              @keyup.enter="handleSubmit"
              id="password"
            />
          </div>
        </div>
        <div class="van-cell__r">
          <img
            src="../../assets/images/activity/pass-invisible.png"
            alt=""
            v-if="showState"
            @click="showPass"
          />
          <img
            src="../../assets/images/activity/pass-visible.png"
            alt=""
            v-else
            @click="showPass"
          />
        </div>
      </div>
      <div class="login-btn" @click="handleSubmit"></div>
    </div>
    <audio
      ref="musicAudio"
      controls="controls"
      loop="loop"
      preload="auto"
      class="audio_show"
    >
      <!---->
      <!-- https://wdd.js.org/element-audio/static/falling-star.mp3 -->
      <source :src="musicPlay.musicSource" type="audio/mpeg" />
      您的浏览器不支持 audio 标签。
    </audio>
  </div>
</template>

<script>
import { screenLogin, getActivityInfo } from "@/api/lottery";
import { Toast, Popup, Dialog } from "vant";
export default {
  data() {
    return {
      password: "",
      showState: true, // 密码框隐藏状态
      inputType: "password",
      activityText: "",
      isShowPassword: true,
      musicPlay: {
        musicState: false, // 音乐播放状态
        musicSource: require("@/assets/media/活动背景配乐.mp3"),
        defaultImg:
          'this.src="' +
          require("@/assets/images/activity/default_head.png") +
          '"',
      },
    };
  },

  components: {},

  computed: {},

  mounted() {
    // this.playMuisc();
    this.getInitActivity();
  },

  methods: {
    playMuisc() {
      this.$refs.musicAudio.play();
    },
    passInput() {
      if (this.password.length > 6) this.password = this.password.slice(0, 6);
    },
    showPass() {
      this.showState = !this.showState;
      this.inputType = this.showState ? "password" : "text";
      let password = document.getElementById("password");
      password.setAttribute("type", this.inputType);
    },
    getInitActivity() {
      getActivityInfo({
        activityId: this.$route.query.activityId,
      }).then((res) => {
        if (res.code == 200000) {
          this.activityText = res.data.activityName;
        } else {
          Dialog.alert({
            width: "560px",
            message: res.msg,
          });
        }
      });
    },
    toggleMusicState() {
      this.musicPlay.musicState = !this.musicPlay.musicState;
      // if (this.music.show) {
      let musicAudio = this.$refs.musicAudio;
      if (this.musicPlay.musicState) {
        musicAudio.play();
      } else {
        musicAudio.pause();
      }
    },
    handleSubmit() {
      if (!this.password) {
        Dialog({ message: "密码不能为空" });
        return;
      }
      screenLogin({
        activityId: this.$route.query.activityId, //"867702180084613120", //this.$route.query.activityId,
        password: this.password,
      }).then((res) => {
        if (res.code == 200000) {
          if (res.data.password != "" || res.data.password != null) {
            sessionStorage.setItem("lottery_storage", "1");
            this.$router.push({
              path: "/activity/lottery",
              query: {
                activityId: this.$route.query.activityId,
              },
            });
          }
        } else {
          Dialog.alert({
            width: "560px",
            message: res.msg,
          });
        }
      });
    },
    beforeDestroy() {
      this.$refs.musicAudio.pause();
    },
  },
};
</script>
<style lang='less' scoped>
.activity_bg {
  background: url("../../assets/images/activity/lockscreen.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  .activity_title {
    width: fit-content;
    height: 67px;
    line-height: 67px;
    background: #000000;
    border-radius: 12px;
    border: 1px solid rgba(236, 165, 48, 1);
    padding: 0 20px;
    // border-image: linear-gradient(
    //     146deg,
    //     rgba(226, 247, 176, 1),
    //     rgba(236, 165, 48, 1)
    //   )
    //   1 1;
    color: #ffffff;
    font-size: 40px;
    text-align: center;
    margin: 0 auto;
  }
  .activity_content {
    display: flex;
    justify-content: center;
    margin-top: 53px;
    .van-cell_block {
      width: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: white;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0px 2px 25px 0px #031513;
      border-radius: 20px;
      border: 2px solid;
      padding: 30px;
    }
    .van-field__left {
      width: 100%;
      display: flex;
      justify-content: space-around;
      img {
        width: 20px;
        vertical-align: middle;
      }
    }
    .van-cell__r {
      img {
        width: 30px;
        vertical-align: middle;
      }
    }
    .van-cell__value {
      padding-left: 20px;
      .van-field__control {
        line-height: 30px;
        font-size: 24px;
      }
    }
    .login-btn {
      width: 208px;
      height: 94px;
      cursor: pointer;
      background: url("../../assets/images/activity/login-btn.png") no-repeat;
      background-size: 100%;
      margin-left: 26px;
      margin-top: 4px; /*no*/
    }
  }
}
.activity_block {
  height: 25%;
  position: relative;
  .navbar-btn {
    width: 126px;
    height: 126px;
    position: absolute;
    right: 40px;
    top: 30px;
    img {
      width: 126px;
    }
  }
}
.audio_show {
  display: none;
}
</style>